<template>
  <div class="faq-container">
    <!-- 添加导航组件 -->
    <help-navigation />
    
    <n-card class="faq-card">
      <template #header>
        <div class="card-header">
          <h1>常见问题解答</h1>
          <div class="search-box">
            <n-input
              v-model:value="searchQuery"
              placeholder="搜索问题..."
              clearable
              round
            >
              <template #prefix>
                <n-icon><SearchOutline /></n-icon>
              </template>
            </n-input>
          </div>
        </div>
      </template>

      <div class="faq-content">
        <!-- 分类导航 -->
        <div class="faq-nav">
          <n-menu
            v-model:value="activeCategory"
            :options="categoryOptions"
            :indent="18"
          />
        </div>

        <!-- 问题列表 -->
        <div class="faq-list">
          <div class="category-header">
            <h2>{{ currentCategoryTitle }}</h2>
          </div>

          <div v-if="filteredQuestions.length === 0" class="empty-state">
            <n-empty description="没有找到相关问题">
              <template #extra>
                <n-button @click="clearSearch">清除搜索</n-button>
              </template>
            </n-empty>
          </div>

          <div v-else class="questions-list">
            <n-collapse>
              <n-collapse-item
                v-for="question in filteredQuestions"
                :key="question.id"
                :title="question.title"
                :name="question.id"
              >
                <div class="question-content">
                  <div v-if="question.content" class="text-content" v-html="question.content"></div>
                  
                  <div v-if="question.steps && question.steps.length > 0" class="steps-content">
                    <h4>解决步骤：</h4>
                    <n-steps :current="question.steps.length" vertical>
                      <n-step 
                        v-for="(step, index) in question.steps" 
                        :key="index"
                        :title="step.title"
                        :description="step.description"
                      />
                    </n-steps>
                  </div>
                  
                  <div v-if="question.image" class="image-content">
                    <img :src="question.image" :alt="question.title">
                  </div>
                  
                  <div v-if="question.relatedQuestions && question.relatedQuestions.length > 0" class="related-questions">
                    <h4>相关问题：</h4>
                    <n-space vertical>
                      <n-button 
                        v-for="related in question.relatedQuestions" 
                        :key="related.id"
                        text
                        @click="scrollToQuestion(related.id)"
                      >
                        {{ related.title }}
                      </n-button>
                    </n-space>
                  </div>
                </div>
              </n-collapse-item>
            </n-collapse>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="faq-footer">
          <div class="footer-text">
            没有找到您需要的答案？
          </div>
          <div class="footer-actions">
            <n-space>
              <n-button @click="goToTutorials">
                <template #icon><n-icon><BookOutline /></n-icon></template>
                查看教程
              </n-button>
              <n-button @click="goToFeedback" type="primary">
                <template #icon><n-icon><ChatboxOutline /></n-icon></template>
                联系支持
              </n-button>
            </n-space>
          </div>
        </div>
      </template>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, h } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { 
  NCard, 
  NButton, 
  NIcon, 
  NInputGroup, 
  NInput, 
  NMenu,
  NSpace,
  NCollapse,
  NCollapseItem,
  NEmpty,
  NSteps,
  NStep
} from 'naive-ui'
import { 
  SearchOutline,
  ThumbsUpOutline,
  ThumbsDownOutline,
  BookOutline,
  ChatboxOutline
} from '@vicons/ionicons5'
import HelpNavigation from '../../components/help/HelpNavigation.vue'

// 路由
const router = useRouter()
const message = useMessage()

// 搜索和分类
const searchQuery = ref('')
const activeCategory = ref('general')

// 分类选项
const categoryOptions = [
  {
    label: '常规问题',
    key: 'general',
    icon: () => h(HelpCircle)
  },
  {
    label: '账户与授权',
    key: 'account',
    icon: () => h(HelpCircle)
  },
  {
    label: '项目管理',
    key: 'project',
    icon: () => h(HelpCircle)
  },
  {
    label: '角色与场景',
    key: 'character-scene',
    icon: () => h(HelpCircle)
  },
  {
    label: '动画制作',
    key: 'animation',
    icon: () => h(HelpCircle)
  },
  {
    label: 'AI功能',
    key: 'ai',
    icon: () => h(HelpCircle)
  },
  {
    label: '导出与分享',
    key: 'export',
    icon: () => h(HelpCircle)
  },
  {
    label: '技术问题',
    key: 'technical',
    icon: () => h(HelpCircle)
  }
]

// 问题接口
interface Question {
  id: string;
  title: string;
  content?: string;
  category: string;
  tags: string[];
  steps?: {
    title: string;
    description: string;
  }[];
  image?: string;
  relatedQuestions?: {
    id: string;
    title: string;
  }[];
}

// 模拟问题数据
const questions = ref<Question[]>([
  {
    id: 'general-1',
    title: '皮影快闪适合哪些用户使用？',
    content: '皮影快闪适合对中国传统皮影艺术感兴趣的各类用户，包括但不限于：<br><br>• <strong>艺术爱好者</strong>：对传统皮影艺术感兴趣的个人<br>• <strong>动画创作者</strong>：希望创作具有中国特色的动画作品的专业人士<br>• <strong>教育工作者</strong>：希望在教学中展示中国传统文化的教师<br>• <strong>学生</strong>：学习中国传统文化或动画制作的学生<br>• <strong>文化机构</strong>：致力于传统文化传播的组织和机构<br><br>无论您是初学者还是专业人士，皮影快闪都提供了直观易用的界面和强大的功能，帮助您创作出精美的皮影动画作品。',
    category: 'general',
    tags: ['入门', '用户群体']
  },
  {
    id: 'general-2',
    title: '皮影快闪的系统要求是什么？',
    content: '<strong>最低系统要求：</strong><br><br>• <strong>操作系统</strong>：Windows 10 (64位) / macOS 10.14或更高版本 / Ubuntu 20.04或更高版本<br>• <strong>处理器</strong>：Intel Core i5 (第8代或更高) / AMD Ryzen 5或同等性能<br>• <strong>内存</strong>：8GB RAM<br>• <strong>显卡</strong>：支持OpenGL 4.0的集成显卡<br>• <strong>存储空间</strong>：4GB可用空间<br>• <strong>显示器</strong>：1366 x 768分辨率<br><br><strong>推荐系统配置：</strong><br><br>• <strong>操作系统</strong>：Windows 11 / macOS 12或更高版本<br>• <strong>处理器</strong>：Intel Core i7 (第10代或更高) / AMD Ryzen 7或同等性能<br>• <strong>内存</strong>：16GB RAM<br>• <strong>显卡</strong>：独立显卡，2GB VRAM<br>• <strong>存储空间</strong>：SSD，10GB可用空间<br>• <strong>显示器</strong>：1920 x 1080或更高分辨率',
    category: 'general',
    tags: ['系统要求', '硬件', '软件']
  },
  {
    id: 'account-1',
    title: '如何注册皮影快闪账户？',
    content: '您可以通过以下步骤注册皮影快闪账户：',
    category: 'account',
    tags: ['账户', '注册'],
    steps: [
      {
        title: '打开注册页面',
        description: '启动皮影快闪软件，点击登录界面上的"注册新账户"按钮'
      },
      {
        title: '填写信息',
        description: '输入您的电子邮箱、用户名和密码，阅读并同意用户协议和隐私政策'
      },
      {
        title: '验证邮箱',
        description: '系统会向您的邮箱发送一封验证邮件，请点击邮件中的链接完成验证'
      },
      {
        title: '完成注册',
        description: '验证成功后，您的账户就创建完成了，可以使用新账户登录软件'
      }
    ]
  },
  {
    id: 'account-2',
    title: '如何激活软件授权？',
    content: '皮影快闪提供多种授权方式，包括个人授权、教育授权和企业授权。激活软件授权的步骤如下：',
    category: 'account',
    tags: ['授权', '激活'],
    steps: [
      {
        title: '购买授权',
        description: '从官方网站或授权经销商处购买适合您需求的授权类型'
      },
      {
        title: '获取授权码',
        description: '购买成功后，您将通过邮件收到授权码'
      },
      {
        title: '打开授权管理',
        description: '在软件中，点击"设置 > 授权管理"'
      },
      {
        title: '输入授权码',
        description: '在授权管理页面，输入您收到的授权码并点击"激活"按钮'
      },
      {
        title: '验证授权',
        description: '系统将验证您的授权码，验证成功后软件功能将完全解锁'
      }
    ],
    relatedQuestions: [
      {
        id: 'account-3',
        title: '授权可以在多少台设备上使用？'
      },
      {
        id: 'account-4',
        title: '如何升级我的授权？'
      }
    ]
  },
  {
    id: 'account-3',
    title: '授权可以在多少台设备上使用？',
    content: '皮影快闪的授权策略根据不同的授权类型有所不同：<br><br>• <strong>个人授权</strong>：可在最多2台个人设备上使用（例如1台台式机和1台笔记本）<br>• <strong>教育授权</strong>：单用户授权可在1台设备上使用，机构授权根据购买的席位数决定<br>• <strong>企业授权</strong>：根据购买的席位数决定可使用的设备数量<br><br>请注意，同一授权不支持在多台设备上同时使用。如需在新设备上激活，您可能需要先在旧设备上停用授权。',
    category: 'account',
    tags: ['授权', '设备限制'],
    relatedQuestions: [
      {
        id: 'account-2',
        title: '如何激活软件授权？'
      },
      {
        id: 'account-5',
        title: '如何在新设备上转移授权？'
      }
    ]
  },
  {
    id: 'project-1',
    title: '如何创建新项目？',
    content: '创建新的皮影动画项目非常简单：',
    category: 'project',
    tags: ['项目', '创建'],
    steps: [
      {
        title: '打开主界面',
        description: '启动皮影快闪软件，进入主界面'
      },
      {
        title: '点击"新建项目"',
        description: '在主界面上点击"新建项目"按钮，或使用快捷键Ctrl+N (Windows/Linux) 或 Cmd+N (macOS)'
      },
      {
        title: '设置项目参数',
        description: '在弹出的对话框中设置项目名称、分辨率、帧率等基本参数'
      },
      {
        title: '选择项目模板（可选）',
        description: '您可以选择从空白项目开始，或使用预设模板'
      },
      {
        title: '创建项目',
        description: '点击"创建"按钮完成项目创建，系统将打开编辑器界面'
      }
    ],
    image: 'https://picsum.photos/id/1/600/300'
  },
  {
    id: 'character-scene-1',
    title: '如何导入自定义角色素材？',
    content: '皮影快闪支持导入多种格式的自定义角色素材，包括PNG、SVG、PSD等。导入步骤如下：',
    category: 'character-scene',
    tags: ['角色', '素材', '导入'],
    steps: [
      {
        title: '准备素材',
        description: '确保您的素材已按照角色部件（头部、身体、四肢等）分离，并保存为透明背景的图片文件'
      },
      {
        title: '打开角色编辑器',
        description: '在编辑器中点击"角色 > 新建角色"或在角色面板中点击"+"按钮'
      },
      {
        title: '导入素材',
        description: '点击"导入部件"按钮，选择您准备好的素材文件'
      },
      {
        title: '调整部件位置',
        description: '导入后，您可以调整各部件的位置、大小和层级关系'
      },
      {
        title: '设置骨骼点',
        description: '为角色添加骨骼点，以便后续制作动画'
      },
      {
        title: '保存角色',
        description: '完成编辑后，点击"保存"按钮将角色保存到项目中'
      }
    ]
  },
  {
    id: 'animation-1',
    title: '如何创建关键帧动画？',
    content: '关键帧动画是皮影快闪中最基本的动画创建方式，通过以下步骤可以创建流畅的角色动画：',
    category: 'animation',
    tags: ['动画', '关键帧'],
    steps: [
      {
        title: '选择角色',
        description: '在场景中选择要制作动画的角色'
      },
      {
        title: '打开时间轴面板',
        description: '确保时间轴面板可见，如果不可见，点击"视图 > 时间轴"显示'
      },
      {
        title: '创建起始关键帧',
        description: '将时间指示器移动到起始位置，调整角色姿势，然后点击"添加关键帧"按钮'
      },
      {
        title: '创建结束关键帧',
        description: '将时间指示器移动到结束位置，调整角色到目标姿势，再次点击"添加关键帧"按钮'
      },
      {
        title: '调整缓动效果',
        description: '右键点击关键帧，选择"缓动设置"，调整动画的速度变化曲线'
      },
      {
        title: '预览动画',
        description: '点击播放按钮预览动画效果，根据需要调整关键帧位置或添加更多关键帧'
      }
    ],
    image: 'https://picsum.photos/id/2/600/300'
  },
  {
    id: 'ai-1',
    title: 'AI生成功能如何使用？',
    content: '皮影快闪的AI生成功能可以帮助您快速创建角色、场景和动画效果。使用方法如下：',
    category: 'ai',
    tags: ['AI', '生成'],
    steps: [
      {
        title: '进入AI生成面板',
        description: '点击工具栏中的"AI"按钮或选择"工具 > AI生成"菜单项'
      },
      {
        title: '选择生成类型',
        description: '在AI面板中选择要生成的内容类型：角色、场景、动作、特效等'
      },
      {
        title: '编写提示词',
        description: '在提示词输入框中详细描述您想要生成的内容，越具体效果越好'
      },
      {
        title: '调整参数',
        description: '根据需要调整生成参数，如风格、复杂度、细节程度等'
      },
      {
        title: '生成内容',
        description: '点击"生成"按钮，系统将根据您的提示词生成内容'
      },
      {
        title: '应用或调整',
        description: '生成完成后，您可以直接应用到项目中，或进行进一步调整'
      }
    ]
  },
  {
    id: 'export-1',
    title: '如何导出作品为视频文件？',
    content: '完成创作后，您可以将皮影动画导出为多种格式的视频文件：',
    category: 'export',
    tags: ['导出', '视频'],
    steps: [
      {
        title: '打开导出对话框',
        description: '点击"文件 > 导出"菜单项，或使用快捷键Ctrl+E (Windows/Linux) 或 Cmd+E (macOS)'
      },
      {
        title: '选择导出格式',
        description: '在导出对话框中选择输出格式，如MP4、WebM、GIF等'
      },
      {
        title: '设置导出参数',
        description: '设置分辨率、帧率、质量等参数，高质量设置会增加文件大小'
      },
      {
        title: '选择导出范围',
        description: '选择导出整个项目或指定时间段'
      },
      {
        title: '选择保存位置',
        description: '点击"浏览"按钮选择导出文件的保存位置'
      },
      {
        title: '开始导出',
        description: '点击"导出"按钮开始渲染和导出过程，等待完成'
      }
    ]
  },
  {
    id: 'technical-1',
    title: '软件崩溃了，如何恢复我的工作？',
    content: '遇到软件崩溃是令人沮丧的，但皮影快闪提供了多种方式来恢复您的工作：',
    category: 'technical',
    tags: ['崩溃', '恢复', '自动保存'],
    steps: [
      {
        title: '重启软件',
        description: '重新启动皮影快闪软件'
      },
      {
        title: '检查自动恢复',
        description: '软件启动后通常会自动检测到崩溃，并提示您恢复上次的工作'
      },
      {
        title: '手动恢复',
        description: '如果没有自动提示，点击"文件 > 恢复 > 自动保存的项目"'
      },
      {
        title: '查找备份',
        description: '如果自动恢复不可用，检查备份文件夹：点击"文件 > 打开 > 从备份恢复"'
      },
      {
        title: '联系支持',
        description: '如果以上方法都无法恢复您的工作，请联系技术支持并提供崩溃日志'
      }
    ],
    relatedQuestions: [
      {
        id: 'technical-2',
        title: '如何启用自动保存功能？'
      },
      {
        id: 'technical-3',
        title: '在哪里可以找到崩溃日志？'
      }
    ]
  }
])

// 计算属性：当前分类标题
const currentCategoryTitle = computed(() => {
  const category = categoryOptions.find(cat => cat.key === activeCategory.value)
  if (!category) return '全部问题'
  return category.label
})

// 计算属性：筛选后的问题
const filteredQuestions = computed(() => {
  let result = [...questions.value]
  
  // 按分类筛选
  if (activeCategory.value) {
    result = result.filter(question => question.category === activeCategory.value)
  }
  
  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(question => 
      question.title.toLowerCase().includes(query) || 
      (question.content && question.content.toLowerCase().includes(query)) ||
      question.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }
  
  return result
})

// 滚动到指定问题
const scrollToQuestion = (id: string) => {
  // 先确保问题已展开
  activeCategory.value = questions.value.find(q => q.id === id)?.category || activeCategory.value
  
  // 使用setTimeout确保DOM已更新
  setTimeout(() => {
    const element = document.getElementById(id)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
      // 模拟点击以展开问题
      element.click()
    }
  }, 100)
}

// 清除搜索
const clearSearch = () => {
  searchQuery.value = ''
}

// 前往反馈页面
const goToFeedback = () => {
  router.push('/feedback')
}

// 跳转到教程页面
const goToTutorials = () => {
  router.push('/tutorials')
}

// 生命周期钩子
onMounted(() => {
  // 可以在这里加载问题数据
  
  // 如果URL中有问题ID参数，自动滚动到对应问题
  const queryParams = new URLSearchParams(window.location.search)
  const questionId = queryParams.get('questionId')
  if (questionId) {
    scrollToQuestion(questionId)
  }
})
</script>

<style lang="scss" scoped>
.faq-container {
  padding: 20px;
  height: 100%;
  
  .faq-card {
    height: 100%;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      
      h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 500;
      }
      
      .search-box {
        width: 300px;
      }
    }
  }
  
  .faq-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    margin-top: 20px;
    height: calc(100% - 60px);
    
    .faq-nav {
      border-right: 1px solid var(--border-color);
      padding-right: 16px;
      overflow-y: auto;
    }
    
    .faq-list {
      overflow-y: auto;
      
      .category-header {
        margin-bottom: 20px;
        
        h2 {
          margin: 0;
          font-size: 20px;
          font-weight: 500;
        }
      }
      
      .questions-list {
        .question-content {
          padding: 8px 0;
          
          .text-content {
            margin-bottom: 16px;
            line-height: 1.6;
          }
          
          .steps-content {
            margin: 16px 0;
            
            h4 {
              margin: 0 0 12px 0;
              font-size: 16px;
              font-weight: 500;
            }
          }
          
          .image-content {
            margin: 16px 0;
            
            img {
              max-width: 100%;
              border-radius: 4px;
              border: 1px solid var(--border-color);
            }
          }
          
          .related-questions {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px dashed var(--border-color);
            
            h4 {
              margin: 0 0 12px 0;
              font-size: 16px;
              font-weight: 500;
            }
          }
        }
      }
      
      .empty-state {
        padding: 40px 0;
      }
    }
  }
  
  .faq-footer {
    text-align: center;
    color: var(--text-color-secondary);
    
    p {
      margin: 0;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .faq-container {
    padding: 10px;
    
    .faq-content {
      grid-template-columns: 1fr;
      
      .faq-nav {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 16px;
        margin-bottom: 16px;
      }
    }
    
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      
      .search-box {
        width: 100%;
      }
    }
  }
}
</style> 